<!--
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2024-06-24 09:29:56
 * @LastEditors: your name
 * @LastEditTime: 2024-07-24 09:27:38
-->
<template>
    <div id="cesium-viewer">
        <slot/>
    </div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted,markRaw } from "vue";
import {useMapData} from '@/store'
import {
    initViewer,
    setScene,
    loadTilesets,
} from "@/cesiumTools/sceneManager";

//初始化cesium实例
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3MDFkMjcyMS0yZjg4LTQyNjgtYjExNy1mMGQ3MGI4MDViYTEiLCJpZCI6MzM1Nzk2LCJpYXQiOjE3NTY4ODc1NjZ9.7mDdmIh6cZCpu-bUYFu_5pXbs6THFTeBfBx06jHuhrM';

const dataStore=useMapData()
onMounted(async () => {
    const viewer = initViewer("cesium-viewer");
    setScene(viewer);
    // 可以使用pinia来管理viewer地图对象，只需要将其标记为非响应式即可
    dataStore.setViewer(markRaw(viewer))
    const modelUrls = [{
      url:"http://localhost:666/model/tileset.json",
      options:{}
    }]
    // 加载多个3dtiles
    await loadTilesets(viewer,modelUrls,(tilesets)=>{
      dataStore.setTileset(tilesets[0])
      viewer.zoomTo(tilesets[0])
    })
});
</script>
<style>
#cesium-viewer {
    width: 100%;
    height: 100%;
    pointer-events: all;
}
</style>